<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useGameStore } from '@/stores/gameStore'

/**
 * Vue跑酷游戏根组件
 * 负责全局状态管理和路由渲染
 * @component
 */

const gameStore = useGameStore()

/**
 * 处理全局键盘事件
 * @param event - 键盘事件
 */
const handleGlobalKeyDown = (event: KeyboardEvent): void => {
  // 阻止某些默认行为，如空格键滚动页面
  if (['Space', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.code)) {
    event.preventDefault()
  }
}

/**
 * 处理页面可见性变化
 * 当页面不可见时自动暂停游戏
 */
const handleVisibilityChange = (): void => {
  if (document.hidden && gameStore.gameStatus === 'playing') {
    gameStore.pauseGame()
  }
}

// 生命周期钩子
onMounted(() => {
  // 初始化游戏存储（已在store创建时自动加载）
  console.log('游戏存储已初始化')
  
  // 添加全局事件监听器
  document.addEventListener('keydown', handleGlobalKeyDown)
  document.addEventListener('visibilitychange', handleVisibilityChange)
  
  console.log('Vue跑酷游戏应用已启动')
})

onUnmounted(() => {
  // 清理事件监听器
  document.removeEventListener('keydown', handleGlobalKeyDown)
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  
  console.log('Vue跑酷游戏应用已清理')
})
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@import '@/styles/responsive.scss';

// Global styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: $text-color;
  
  // 移动端优化
  @include mobile-all {
    // 防止橡皮筋效果
    overscroll-behavior: none;
    // 优化触摸滚动
    -webkit-overflow-scrolling: touch;
  }
}

#app {
  min-height: 100vh;
  
  @include mobile-all {
    min-height: -webkit-fill-available;
  }
}

// Button styles with responsive design
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: $border-radius-md;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: $transition-normal;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  
  // 触摸设备优化
  @include touch-device {
    min-height: 44px; // iOS推荐的最小触摸目标
    min-width: 44px;
  }

  &.btn-primary {
    background-color: $primary-color;
    color: white;

    &:hover {
      background-color: $primary-dark-10;
      transform: translateY(-2px);
    }

    &:disabled {
      background-color: $primary-light-20;
      cursor: not-allowed;
      transform: none;
    }
    
    // 移动端点击效果
    @include touch-device {
      &:active {
        background-color: $primary-dark-15;
        transform: scale(0.98);
      }
    }
  }

  &.btn-secondary {
    background-color: $secondary-color;
    color: white;

    &:hover {
      background-color: $secondary-dark-10;
      transform: translateY(-2px);
    }
    
    @include touch-device {
      &:active {
        background-color: $secondary-dark-15;
        transform: scale(0.98);
      }
    }
  }

  &.btn-danger {
    background-color: $danger-color;
    color: white;

    &:hover {
      background-color: $danger-dark-10;
      transform: translateY(-2px);
    }
    
    @include touch-device {
      &:active {
        background-color: $danger-dark-15;
        transform: scale(0.98);
      }
    }
  }
  
  // 响应式按钮大小
  @include mobile-all {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
  }
  
  @include mobile-small {
    padding: 0.875rem;
    font-size: 1rem;
  }
}

// 全局响应式工具类
.safe-area-padding {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.full-height {
  height: 100vh;
  
  @include mobile-all {
    height: -webkit-fill-available;
  }
}
</style>
